<template>
  <div id="exam" style="background: #fff">
    <h1>我的考试</h1>

    <div class="search">
      <h2 style="float: left">考试状态:</h2>
      <meunBtn
        :meunBtnkey="search.timeMark"
        :list="examMeunBtnList"
        @change="changeExamMeun"
      ></meunBtn>

      <div class="appendinput">
        <el-input
          placeholder="请输入课程名称"
          v-model="search.fullName"
          class="input-with-select"
        >
          <el-button
            slot="append"
            type="primary"
            icon="el-icon-search"
            @click="initData"
          ></el-button>
        </el-input>
      </div>

      <h2 style="float: left; margin-top: 20px">参与状态:</h2>
      <meunBtn
        :meunBtnkey="search.enabledMark"
        style="margin-top: 20px"
        :list="meunBtnList"
        @change="changemeun"
      ></meunBtn>
    </div>
    <div class="content" v-loading="listLoading">
      <div
        class="box"
        style="cursor: pointer"
        v-for="item in list"
        @click="toDetail(item)"
        :key="item.id"
      >
        <div
          class="imageBox"
          v-if="new Date().getTime() < new Date(item.endDatetime).getTime()"
        >
          <el-image
            src=""
            class="image"
          />
          <div class="p">考试进行中</div>
        </div>
        <div class="imageBox" style="background-color: #7a7a7a" v-else>
          <el-image
            src=""
            class="image"
          />
          <div class="p">考试已结束</div>
        </div>
        <div class="info">
          <h1>
            <span
              v-if="item.examTask == null"
              class="infoStutus"
              style="display: inline-block"
            >
              未参与
            </span>
            <span
              v-if="item.examTask != null && item.examTask.enabledMark == 0"
              class="infoStutus"
              style="display: inline-block"
            >
              不通过
            </span>
            <span
              v-if="item.examTask != null && item.examTask.enabledMark == 1"
              class="infoStutus"
              style="
                display: inline-block;
                background-color: #44b44f;
                color: #fff;
              "
            >
              已通过
            </span>
            {{ item.fullName }}
          </h1>
          <div class="p" style="display: flex; align-items: center">
            <span
              v-if="item.examRepeat == 0"
              style="height: 30px; margin-top: 5px; display: inline-block"
            >
              参考次数： {{ item.examTaskCount || 0 }}/1
            </span>
            <span
              v-if="item.examRepeat == 1 && item.examRepeatType == 'before'"
              style="height: 30px; margin-top: 5px; display: inline-block"
            >
              参考次数： {{ item.examTaskCount || 0 }}/无限制
            </span>
            <span
              v-if="item.examRepeat == 1 && item.examRepeatType == 'custom'"
              style="height: 30px; margin-top: 5px; display: inline-block"
            >
              参考次数： {{ item.examTaskCount || 0 }}/
              {{ item.examRepeatNum }}</span
            >
          </div>
          <p class="p">
            参考时间：{{ item.startDatetime }}~{{ item.endDatetime }}
          </p>
          <p class="p" v-if="item.examTask == null">
            <span style="color: #e8673e"> 未得分 </span>
          </p>
          <p class="p" v-if="item.examTask != null">
            考试得分：
            <span style="color: #e8673e">
              {{ item.examTask.myScore || 0 }}
            </span>
          </p>
        </div>
        <div class="btn" style="width: 120px">
          <el-button> 查看详情</el-button>
        </div>
      </div>
      <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import meunBtn from "./compents/meunBtn";
import request from "@/utils/request";

export default {
  name: "exam",
  components: {
    meunBtn,
  },
  data() {
    return {
      listLoading: false,
      examMeunBtnList: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "未开始",
          id: 10,
        },
        {
          name: "进行中",
          id: 20,
        },
        {
          name: "已结束",
          id: 30,
        },
      ],
      meunBtnList: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "未通过",
          id: 10,
        },
        {
          name: "已通过",
          id: 20,
        },
        {
          name: "未参与",
          id: 30,
        },
      ],
      input3: "",
      search: {
        currentPage: 1,
        pageSize: 99,
        sidx: "",
        sort: "desc",
        enabledMark: 0,
        timeMark: 0,
        fullName: "",
      },
      list: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    toDetail(item) {
      this.$router.push(`/examWeb/index?id=` + item.id);
    },
    changemeun(v) {
      this.search.enabledMark = v.id;
      this.initData();
    },
    changeExamMeun(v) {
      this.search.timeMark = v.id;
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.search,
      };
      request({
        url: `/api/exam/TemsExam/myExamList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = [...res.data.list];
        this.listLoading = false;
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
#exam {
  padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;
}

.search {
  padding-bottom: 20px;
  border-bottom: 0.5px solid #e6e6e6;
  margin-top: 20px;
  line-height: 32px;
  width: 100%;

  // display: flex;
  // justify-items: center;
  .appendinput {
    margin-top: -31px;
    width: 200px;
    float: right;
    display: flex;
  }
}

.box {
  .infoStutus {
    display: inline-block;
    line-height: 26px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    margin-right: 12px;
    font-weight: 400;
    background-color: #e8673e;
  }

  margin-top: 30px;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  .imageBox {
    background-color: #e8993e;
    width: 258px;
    height: 145px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    position: relative;
    .p {
      position: absolute;
      font-size: 16px;
      bottom: 12px;
    }
    .image {
      width: 60px;
    }
  }

  .info {
    width: 502px;

    .p {
      color: #666;
      font-size: 14px;
      margin: 8px 0 0 0;
      line-height: 25px;
      min-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .checkboxlist {
    display: inline-block;

    width: 400px;
    // display: flex;
    // justify-content: space-between;
  }

  .checkbox {
    float: left;
    display: inline-block;
    background-color: #f4f4f4;
    border-radius: 12px;
    margin-right: 12px;
    // margin-bottom: 12px;
    padding: 4px 8px 4px 8px;
    // padding-left: ;
    width: 108px;
    height: 30px;
    // pointer-events: none;
  }
}
</style>
